<template>
  <!-- 房间数据-->
  <div class="roominfo">
    <div class="roominfo_top">
      <!-- 统计数据 -->
      <div class="roominfo_info">
        <div>
          <p>本周总流水</p>
          <p>￥{{ roominfo.totalAmount }}</p>
        </div>
        <div>
          <p>本周普通礼物流水</p>
          <p>￥{{ roominfo.normalAmount }}</p>
        </div>
      </div>
      <!-- 搜索 -->
      <div class="roomifo_search">
        <div>
          <input
            type="text"
            v-model="mubiaoid"
            @blur="blurClick"
            @click="ChoiceClick(1)"
            placeholder="请输入id"
          />
        </div>
        <div>
          <div @click="ChoiceClick(2)">{{ dateText }}</div>
          <van-calendar
            v-model="dateShow"
            :min-date="minDate"
            @confirm="onConfirm"
          />
        </div>
      </div>
    </div>
    <!-- 列表 -->
    <ul class="roominfo_ul">
      <li v-for="(item, index) in infoList" :key="index">
        <div>
          <img :src="item.headPic" />
        </div>
        <div>
          <p>{{ item.nickname }}</p>
          <p>ID：{{ item.perfectNumber }}</p>
        </div>
        <div>
          <p>{{ item.giftName }}*{{ item.num }}</p>
          <p>{{ item.add_time }}</p>
        </div>
      </li>
      <li @click="moreClick">点击加载更多</li>
    </ul>
  </div>
</template>

<script>
import md5 from "js-md5";
import qs from "qs";
import { Toast } from "vant";
export default {
  data() {
    return {
      false: false,
      mubiaoNum: null, //目标金额
      tanchuShow: false, //弹窗是否显示
      mubiaoid: null, //搜索id
      dateShow: false, //选择日期是否显示
      dateText: "选择日期", //日期
      infoList: [], //列表
      roomId: 90, //房间id
      page: 0, //页数
      roominfo: {"totalAmount":''}, //房间数据
      minDate: new Date(2010, 0, 1),
    };
  },
  created() {
    let url = location.href;
    this.roomId = url.split("?")[1].split("=")[1];
    let timestamp = (Date.parse(new Date()) / 1000).toString();
    let _token =
      "userId=" +
      window.user_id +
      "&token=" +
      window.userToken +
      "&time=" +
      timestamp +
      "&roomId=" +
      this.roomId +
      "&page=" +
      this.page +
      "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
    let params = {
      userId: window.user_id,
      roomId: this.roomId,
      time: timestamp,
      page: this.page,
      token: window.userToken,
      sign: md5(_token),
    };
    //获取用户信息
    this.getInfo(params);
  },
  methods: {
    getInfo(params) {
      this.$axios
        .post("/chat/roomdata", qs.stringify(params))
        .then((res) => {
          console.log(res.data.result);
          this.roominfo = res.data.result;
          this.infoList = res.data.result.giftSendList;
          if (res.data.status == 0) {
            if (!res.data.result.giftSendList.length) {
              Toast("暂无数据");
            }
          } else {
            Toast(res.data.text);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeClick() {
      this.tanchuShow = true;
    },
    guanbiClick() {
      this.tanchuShow = false;
      this.mubiaoNum = null;
    },
    okClick() {
      let timestamp = (Date.parse(new Date()) / 1000).toString();
      let _token =
        "userId=" +
        window.user_id +
        "&token=" +
        window.userToken +
        "&time=" +
        timestamp +
        "&roomId=" +
        this.roomId +
        "&goal=" +
        this.mubiaoNum +
        "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
      let params = {
        userId: window.user_id,
        roomId: this.roomId,
        goal: this.mubiaoNum,
        time: timestamp,
        token: window.userToken,
        sign: md5(_token),
      };
      this.$axios
        .post("/chat/setgoal", qs.stringify(params))
        .then((res) => {
          console.log(res.data);
          Toast(res.data.text);
          if (res.data.status == 0) {
            setTimeout(() => {
              let _token =
                "userId=" +
                window.user_id +
                "&token=" +
                window.userToken +
                "&time=" +
                timestamp +
                "&roomId=" +
                this.roomId +
                "&page=" +
                0 +
                "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
              let params = {
                userId: window.user_id,
                roomId: this.roomId,
                page: 0,
                time: timestamp,
                token: window.userToken,
                sign: md5(_token),
              };
              //获取用户信息
              this.getInfo(params);
              this.tanchuShow = false;
            }, 500);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date) {
      this.dateShow = false;
      this.dateText = this.formatDate(date);
      let timestamp = (Date.parse(new Date()) / 1000).toString();
      if (this.mubiaoid) {
        let _token =
          "userId=" +
          window.user_id +
          "&token=" +
          window.userToken +
          "&time=" +
          timestamp +
          "&roomId=" +
          this.roomId +
          "&page=" +
          this.page +
          "&memberId=" +
          this.mubiaoid +
          "&date=" +
          this.dateText +
          "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
        let params = {
          userId: window.user_id,
          roomId: this.roomId,
          page: this.page,
          date: this.dateText,
          time: timestamp,
          memberId: this.mubiaoid,
          token: window.userToken,
          sign: md5(_token),
        };
        this.getInfo(params);
      } else {
        let _token =
          "userId=" +
          window.user_id +
          "&token=" +
          window.userToken +
          "&time=" +
          timestamp +
          "&roomId=" +
          this.roomId +
          "&page=" +
          this.page +
          "&date=" +
          this.dateText +
          "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
        let params = {
          userId: window.user_id,
          roomId: this.roomId,
          page: this.page,
          date: this.dateText,
          time: timestamp,
          token: window.userToken,
          sign: md5(_token),
        };
        this.getInfo(params);
      }
      //获取用户信息
    },
    ChoiceClick(num) {
      if (num == 1) {
        this.mubiaoid = null;
      } else if (num == 2) {
        this.dateShow = true;
        this.dateText = "选择日期";
      }
    },
    blurClick() {
      console.log(this.mubiaoid);
      let timestamp = (Date.parse(new Date()) / 1000).toString();
      if (this.mubiaoid) {
        if (this.dateText != "选择日期") {
          let _token =
            "userId=" +
            window.user_id +
            "&token=" +
            window.userToken +
            "&time=" +
            timestamp +
            "&roomId=" +
            this.roomId +
            "&page=" +
            this.page +
            "&memberId=" +
            this.mubiaoid +
            "&date=" +
            this.dateText +
            "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
          let params = {
            userId: window.user_id,
            roomId: this.roomId,
            page: this.page,
            date: this.dateText,
            time: timestamp,
            memberId: this.mubiaoid,
            token: window.userToken,
            sign: md5(_token),
          };
          this.getInfo(params);
        } else {
          let _token =
            "userId=" +
            window.user_id +
            "&token=" +
            window.userToken +
            "&time=" +
            timestamp +
            "&roomId=" +
            this.roomId +
            "&page=" +
            this.page +
            "&memberId=" +
            this.mubiaoid +
            "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
          let params = {
            userId: window.user_id,
            roomId: this.roomId,
            page: this.page,
            time: timestamp,
            memberId: this.mubiaoid,
            token: window.userToken,
            sign: md5(_token),
          };
          this.getInfo(params);
        }
        //获取用户信息
      }
    },
    moreClick() {
      let timestamp = (Date.parse(new Date()) / 1000).toString();
      let params = {};
      this.page += 1;
      if (this.mubiaoid) {
        if (this.dateText != "选择日期") {
          let _token =
            "userId=" +
            window.user_id +
            "&token=" +
            window.userToken +
            "&time=" +
            timestamp +
            "&roomId=" +
            this.roomId +
            "&page=" +
            this.page +
            "&memberId=" +
            this.mubiaoid +
            "&date=" +
            this.dateText +
            "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
          params = {
            userId: window.user_id,
            roomId: this.roomId,
            page: this.page,
            date: this.dateText,
            time: timestamp,
            memberId: this.mubiaoid,
            token: window.userToken,
            sign: md5(_token),
          };
        } else {
          let _token =
            "userId=" +
            window.user_id +
            "&token=" +
            window.userToken +
            "&time=" +
            timestamp +
            "&roomId=" +
            this.roomId +
            "&page=" +
            this.page +
            "&memberId=" +
            this.mubiaoid +
            "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
          params = {
            userId: window.user_id,
            roomId: this.roomId,
            page: this.page,
            time: timestamp,
            memberId: this.mubiaoid,
            token: window.userToken,
            sign: md5(_token),
          };
        }
      } else {
        if (this.dateText != "选择日期") {
          let _token =
            "userId=" +
            window.user_id +
            "&token=" +
            window.userToken +
            "&time=" +
            timestamp +
            "&roomId=" +
            this.roomId +
            "&page=" +
            this.page +
            "&date=" +
            this.dateText +
            "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
          params = {
            userId: window.user_id,
            roomId: this.roomId,
            page: this.page,
            time: timestamp,
            date: this.dateText,
            token: window.userToken,
            sign: md5(_token),
          };
        } else {
          let _token =
            "userId=" +
            window.user_id +
            "&token=" +
            window.userToken +
            "&time=" +
            timestamp +
            "&roomId=" +
            this.roomId +
            "&page=" +
            this.page +
            "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
          params = {
            userId: window.user_id,
            roomId: this.roomId,
            page: this.page,
            time: timestamp,
            token: window.userToken,
            sign: md5(_token),
          };
        }
      }
      // console.log(params, this.page);
      if (this.infoList.length == 10) {
        this.$axios
          .post("/chat/roomdata", qs.stringify(params))
          .then((res) => {
            // console.log(res.data);
            if (res.data.status == 0) {
              this.infoList = this.infoList.concat(
                res.data.result.giftSendList
              );
            } else {
              Toast(res.data.text);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        Toast("没有更多数据");
      }
    },
  },
};
</script>
<style scoped>
.roominfo {
  width: 100vw;
  overflow: auto;
  height: 100vh;
  position: relative;
}
.roominfo_top {
  position: fixed;
  background: white;
  width: 100vw;
  height: 45.9vw;
  top: 0;
}
.roominfo_info {
  width: 100vw;
  height: 30vw;
  display: flex;
  justify-content: space-around;
}
.roominfo_info > div {
  width: 46vw;
  height: 30vw;
  text-align: center;
  overflow: hidden;
}
.roominfo_info > div > p:nth-child(1) {
  font-size: 2.9vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 4.3vw;
  margin-top: 5.3vw;
}
.roominfo_info > div > p:nth-child(2) {
  font-size: 6.4vw;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #fe804d;
  line-height: 8.8vw;
  margin-top: 3.5vw;
}
.roomifo_search {
  width: 92vw;
  margin-left: 4vw;
  height: 9.6vw;
  display: flex;
  justify-content: space-between;
  padding-bottom: 4.8vw;
}
.roomifo_search > div {
  height: 9.6vw;
  background: rgba(249, 249, 249, 1);
  width: 41.6vw;
  border-radius: 2.7vw;
  font-size: 3.2vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
.roomifo_search > div > input {
  width: 34.5vw;
  margin-left: 3.5vw;
  height: 6.7vw;
  margin-top: 1vw;
  line-height: 6.7vw;
  border: none;
  background: rgba(249, 249, 249, 1);
}
.roomifo_search > div > div {
  color: rgba(109, 114, 120, 1);
  /* height: 9.6vw; */
  line-height: 9.6vw;
  text-align: center;
}
.roominfo_ul {
  width: 92.3vw;
  margin-left: 3.65vw;
  margin-top: 45.9vw;
  overflow: hidden;
}
.roominfo_ul > li {
  width: 92.3vw;
  height: 12vw;
  margin-bottom: 4.3vw;
}
.roominfo_ul > li:nth-last-child(1) {
  text-align: center;
  height: 5vw;
  line-height: 5vw;
  font-size: 2.4vw;
}
.roominfo_ul > li > div {
  float: left;
}
.roominfo_ul > li > div:nth-child(1) > img {
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
  overflow: hidden;
}
.roominfo_ul > li > div:nth-child(2) {
  margin-left: 2.4vw;
}
.roominfo_ul > li > div:nth-child(2) > p:nth-child(1) {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  margin-top: 1.2vw;
  font-size: 3.6vw;
  color: rgba(51, 51, 51, 1);
}
.roominfo_ul > li > div:nth-child(2) > p:nth-child(2) {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(118, 118, 118, 1);
  font-size: 3.1vw;
  margin-top: 0.5vw;
}
.roominfo_ul > li > div:nth-child(3) {
  float: right;
  text-align: right;
}
.roominfo_ul > li > div:nth-child(3) > p:nth-child(1) {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  font-size: 3.6vw;
  margin-top: 1.2vw;
}
.roominfo_ul > li > div:nth-child(3) > p:nth-child(2) {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(157, 157, 157, 1);
  font-size: 2.9vw;
  margin-top: 0.5vw;
}
.roominfo_shezhi {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.62);
}
.roominfo_shezhi > div {
  width: 72.7vw;
  height: 43.5vw;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.07);
  border-radius: 2.4vw;
  text-align: center;
  position: absolute;
  left: 13.65vw;
  top: 30%;
}
.roominfo_shezhi > div > p {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  font-size: 4.3vw;
  margin-top: 5.1vw;
}
.roominfo_shezhi > div > div:nth-of-type(1) {
  width: 53.1vw;
  height: 11.1vw;
  background: rgba(249, 249, 249, 1);
  margin-left: 9.8vw;
  margin-top: 3.1vw;
  line-height: 11.1vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  font-size: 8.2vw;
}
.roominfo_shezhi > div > div:nth-of-type(1) > span {
  float: left;
  margin-left: 4vw;
}
.roominfo_shezhi > div > div:nth-of-type(1) > input {
  float: left;
  width: 35vw;
  border: none;
  background: rgba(249, 249, 249, 1);
}
.roominfo_shezhi > div > div:nth-of-type(2) {
  background: linear-gradient(
    90deg,
    rgba(117, 196, 255, 1) 0%,
    rgba(0, 145, 255, 1) 100%
  );
  width: 55.6vw;
  height: 8.2vw;
  line-height: 8.2vw;
  border-radius: 4.1vw;
  margin-top: 3.8vw;
  margin-left: 8.55vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  font-size: 3.4vw;
}
.roominfo_shezhi > div > img {
  width: 7.2vw;
  position: absolute;
  bottom: 0;
  margin-bottom: -12vw;
  left: 32.75vw;
  width: 7.2vw;
}
</style>